<!DOCTYPE html><html lang="[&quot;zh-CN&quot;,&quot;en&quot;,&quot;default&quot;]" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>基于Hexo框架和Butterfly主题搭建个人博客网站 | 爱吃薯片的熊猫の技术小站</title><meta name="author" content="爱吃薯片的熊猫"><meta name="copyright" content="爱吃薯片的熊猫"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="ffffff"><meta name="description" content="在这篇博客中，我将带你一起走过基于 Hexo 框架搭建个人博客的全过程，同时介绍如何使用 Butterfly 主题来美化博客，使其更加符合个人风格。">
<meta property="og:type" content="article">
<meta property="og:title" content="基于Hexo框架和Butterfly主题搭建个人博客网站">
<meta property="og:url" content="https://ywj-ch.github.io/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/index.html">
<meta property="og:site_name" content="爱吃薯片的熊猫の技术小站">
<meta property="og:description" content="在这篇博客中，我将带你一起走过基于 Hexo 框架搭建个人博客的全过程，同时介绍如何使用 Butterfly 主题来美化博客，使其更加符合个人风格。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ywj-ch.github.io/img/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.png">
<meta property="article:published_time" content="2025-02-11T13:37:26.000Z">
<meta property="article:modified_time" content="2025-02-11T13:43:46.923Z">
<meta property="article:author" content="爱吃薯片的熊猫">
<meta property="article:tag" content="Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://ywj-ch.github.io/img/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.png"><script type="application/ld+json">{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "基于Hexo框架和Butterfly主题搭建个人博客网站",
  "url": "https://ywj-ch.github.io/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/",
  "image": "https://ywj-ch.github.io/img/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.png",
  "datePublished": "2025-02-11T13:37:26.000Z",
  "dateModified": "2025-02-11T13:43:46.923Z",
  "author": [
    {
      "@type": "Person",
      "name": "爱吃薯片的熊猫",
      "url": "https://ywj-ch.github.io/"
    }
  ]
}</script><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://ywj-ch.github.io/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/index.html"><link rel="preconnect" href="//cdnjs.cloudflare.com"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"><script>
    (() => {
      
    const saveToLocal = {
      set: (key, value, ttl) => {
        if (!ttl) return
        const expiry = Date.now() + ttl * 86400000
        localStorage.setItem(key, JSON.stringify({ value, expiry }))
      },
      get: key => {
        const itemStr = localStorage.getItem(key)
        if (!itemStr) return undefined
        const { value, expiry } = JSON.parse(itemStr)
        if (Date.now() > expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return value
      }
    }

    window.btf = {
      saveToLocal,
      getScript: (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
        script.onload = script.onreadystatechange = () => {
          if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
        }
        script.onerror = reject
        document.head.appendChild(script)
      }),
      getCSS: (url, id) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onload = link.onreadystatechange = () => {
          if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
        }
        link.onerror = reject
        document.head.appendChild(link)
      }),
      addGlobalFn: (key, fn, name = false, parent = window) => {
        if (!false && key.startsWith('pjax')) return
        const globalFn = parent.globalFn || {}
        globalFn[key] = globalFn[key] || {}
        globalFn[key][name || Object.keys(globalFn[key]).length] = fn
        parent.globalFn = globalFn
      }
    }
  
      
      const activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      const activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', 'ffffff')
        }
      }

      btf.activateDarkMode = activateDarkMode
      btf.activateLightMode = activateLightMode

      const theme = saveToLocal.get('theme')
    
          const hour = new Date().getHours()
          const isNight = hour <= 6 || hour >= 18
          if (theme === undefined) isNight ? activateDarkMode() : activateLightMode()
          else theme === 'light' ? activateLightMode() : activateDarkMode()
        
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
      }
    
      
    const detectApple = () => {
      if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
  
    })()
  </script><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
  copy: {
    success: '复制成功',
    error: '复制失败',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'null',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdnjs.cloudflare.com/ajax/libs/egjs-infinitegrid/4.12.0/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyloadPlugin: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '基于Hexo框架和Butterfly主题搭建个人博客网站',
  isHighlightShrink: false,
  isToc: true,
  pageType: 'post'
}</script><link rel="stylesheet" href="/css/custom.css" media="defer" onload="this.media='all'"><span id="fps"></span><svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 7.3.0"></head><body><div id="web_bg" style="background-image: url(/img/背景图3.jpg);"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="/img/loading.gif" data-original="/img/butterfly-icon.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">6</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">3</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><span class="site-page group hide"><i class="fa-fw fa fa-list"></i><span> 列表</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/picture/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope-open"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url(/img/个人博客搭建教程.png);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">爱吃薯片的熊猫の技术小站</span></a><a class="nav-page-title" href="/"><span class="site-name">基于Hexo框架和Butterfly主题搭建个人博客网站</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i></span></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><span class="site-page group hide"><i class="fa-fw fa fa-list"></i><span> 列表</span><i class="fas fa-chevron-down"></i></span><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/picture/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/comments/"><i class="fa-fw fas fa-envelope-open"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="post-info"><h1 class="post-title">基于Hexo框架和Butterfly主题搭建个人博客网站</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2025-02-11T13:37:26.000Z" title="发表于 2025-02-11 21:37:26">2025-02-11</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2025-02-11T13:43:46.923Z" title="更新于 2025-02-11 21:43:46">2025-02-11</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/">个人博客</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">总字数:</span><span class="word-count">4.4k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>17分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title=""><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">浏览量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="container post-content" id="article-container"><h3 id="一、前言"><a href="#一、前言" class="headerlink" title="一、前言"></a>一、前言</h3><blockquote>
<p>个人博客无疑是很多开发者、技术爱好者记录技术经验、分享生活和展示个人作品的一个重要平台。作为一名开发者，搭建一个属于自己的博客网站不仅是一个展示自我的窗口，还能帮助自己总结学习成果，提升技术水平。</p>
<p>在这篇博客中，我将带你一起走过基于 Hexo 框架搭建个人博客的全过程，同时介绍如何使用 Butterfly 主题来美化博客，使其更加符合个人风格。</p>
</blockquote>
<blockquote>
<p>下面展示一下我的个人博客网站：</p>
<p><a href="https://ywj-ch.github.io/">爱吃薯片的熊猫の技术小站 - 记录学习与成长 (ywj-ch.github.io)</a></p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_c8c3215b.png" alt="pic_c8c3215b.png"></p>
<h3 id="二、Hexo-框架简介"><a href="#二、Hexo-框架简介" class="headerlink" title="二、Hexo 框架简介"></a>二、Hexo 框架简介</h3><h4 id="2-1、什么是-Hexo？"><a href="#2-1、什么是-Hexo？" class="headerlink" title="2.1、什么是 Hexo？"></a>2.1、什么是 Hexo？</h4><blockquote>
<p>Hexo 是一个快速、简洁且高效的博客框架。 Hexo 使用 <a target="_blank" rel="noopener" href="http://daringfireball.net/projects/markdown/">Markdown</a>（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p>
<p><a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo</a></p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_0b118d77.png" alt="pic_0b118d77.png"></p>
<h4 id="2-2、安装"><a href="#2-2、安装" class="headerlink" title="2.2、安装"></a>2.2、安装</h4><blockquote>
<p>在安装 Hexo 之前需要先安装好 Git 和 Node.js:</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_5a252ec9.png" alt="pic_5a252ec9.png"></p>
<blockquote>
<p>Git 和 Node.js 的安装过程这里就不过多赘述了，下面进行 hexo 的安装：</p>
</blockquote>
<blockquote>
<p>hexo 的安装也非常简单，在终端运行以下代码：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">$ npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<blockquote>
<p>安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">$ hexo init MyBlog</span><br><span class="line">$ cd MyBlog</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure>

<h4 id="2-3、结构解析"><a href="#2-3、结构解析" class="headerlink" title="2.3、结构解析"></a>2.3、结构解析</h4><blockquote>
<p>初始化后，你的项目文件夹将如下所示：</p>
</blockquote>
<blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml</span><br><span class="line">├── <span class="keyword">package</span>.json</span><br><span class="line">├── scaffolds</span><br><span class="line">├── source</span><br><span class="line">|   ├── _drafts</span><br><span class="line">|   └── _posts</span><br><span class="line">└── themes</span><br></pre></td></tr></table></figure></blockquote>
<blockquote>
<p>_config.yml：</p>
<p>网站的配置文件。 你可以在此配置大部分的参数。</p>
</blockquote>
<blockquote>
<p>package.json：</p>
<p>应用程序的信息。 <a target="_blank" rel="noopener" href="https://ejs.co/">EJS</a>, <a target="_blank" rel="noopener" href="http://learnboost.github.io/stylus/">Stylus</a> 和 <a target="_blank" rel="noopener" href="http://daringfireball.net/projects/markdown/">Markdown</a> 渲染引擎 已默认安装，你可以自由移除。</p>
</blockquote>
<blockquote>
<p>scaffolds：</p>
<p>模板文件夹。 当你新建文章时，Hexo 会根据 scaffold 来创建文件。</p>
</blockquote>
<blockquote>
<p>source：</p>
<p>资源文件夹。 是存放用户资源的地方。 除 <code>_posts</code> 文件夹之外，开头命名为 <code>_</code> (下划线)的文件 &#x2F; 文件夹和隐藏的文件将会被忽略。 Markdown 和 HTML 文件会被解析并放到 <code>public</code> 文件夹，而其他文件会被拷贝过去。</p>
</blockquote>
<blockquote>
<p>themes：</p>
<p>主题文件夹， Hexo 会根据主题来生成静态页面。</p>
</blockquote>
<p>到这里你的博客基础框架就搭好了，使用命令 hexo start 即可启动！</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo s</span><br></pre></td></tr></table></figure>

<blockquote>
<p>以上三条命令是 Hexo 中常用的命令，它们的作用分别是：</p>
</blockquote>
<blockquote>
<ul>
<li><p><code>hexo clean</code>：</p>
<ul>
<li>清理 Hexo 生成的缓存和已生成的静态文件。通常在你修改了配置或主题后运行此命令，确保生成的文件是最新的。</li>
<li>它会删除 <code>public</code> 目录中的所有文件和 <code>_posts</code> 目录中的缓存文件。</li>
</ul>
</li>
<li><p><code>hexo g</code>（<code>hexo generate</code>的简写）：</p>
<ul>
<li>生成 Hexo 博客的静态文件。运行这个命令后，Hexo 会根据你的 Markdown 文件生成对应的 HTML 文件，这些文件会被保存在 <code>public</code> 目录下。你可以通过浏览器访问这个目录下的文件，查看你的博客页面。</li>
</ul>
</li>
<li><p><code>hexo s</code>（<code>hexo server</code>的简写）：</p>
<ul>
<li>启动 Hexo 内置的本地开发服务器。运行此命令后，Hexo 会启动一个本地 Web 服务器，默认地址是 <code>http://localhost:4000</code>。你可以在浏览器中打开这个地址，实时查看博客效果。</li>
<li>这个命令非常适合在本地调试和查看博客效果，修改内容后，刷新浏览器即可看到变化。</li>
</ul>
</li>
</ul>
</blockquote>
<blockquote>
<p>一般我们本地测试修改界面样式后使用如下命令即可刷新界面：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">hexo cl; hexo s</span><br></pre></td></tr></table></figure>

<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_7e7b4c21.png" alt="pic_7e7b4c21.png"></p>
<h4 id="2-4、如何写文章？"><a href="#2-4、如何写文章？" class="headerlink" title="2.4、如何写文章？"></a>2.4、如何写文章？</h4><blockquote>
<p>在<code>\scaffolds\post.md</code>文件中，可以修改文章的默认模板，比如：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; title &#125;&#125;</span><br><span class="line">date: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; date &#125;&#125;</span><br><span class="line">categories: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; categories &#125;&#125;</span><br><span class="line">tags: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; tags &#125;&#125;</span><br><span class="line">description: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; description &#125;&#125;</span><br><span class="line">top_img: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; top_img &#125;&#125;</span><br><span class="line">cover: &#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    &#123; cover &#125;&#125;</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<blockquote>
<p>然后在终端运行如下命令即可创建文章：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">hexo <span class="keyword">new</span> <span class="string">&quot;文章标题&quot;</span> --template post</span><br></pre></td></tr></table></figure>

<blockquote>
<p>注意 hexo 默认文章格式只支持 Markdown，你会用 markdown 语法最好，不会也没有关系，网上有很多转换成 markdown 格式的在线编辑器。</p>
</blockquote>
<h3 id="三、基于-GitHub-Pages-部署"><a href="#三、基于-GitHub-Pages-部署" class="headerlink" title="三、基于 GitHub Pages 部署"></a>三、基于 GitHub Pages 部署</h3><blockquote>
<p>搭好了个人博客，虽然在本地可以运行，但如果想让其他人也能访问，就得部署到线上。需要购买服务器吗？不不不，Hexo 自带的插件可以直接将博客部署到 GitHub Pages，完全不需要额外的服务器！</p>
</blockquote>
<h4 id="3-1、什么是-GitHub-Pages？"><a href="#3-1、什么是-GitHub-Pages？" class="headerlink" title="3.1、什么是 GitHub Pages？"></a>3.1、什么是 GitHub Pages？</h4><blockquote>
<p>GitHub Pages 是 GitHub 提供的一项静态网站托管服务，允许用户直接通过 GitHub 仓库托管和发布个人或项目的静态网页。它非常适合用于展示个人博客、项目文档、个人作品集等内容。GitHub Pages 是免费的，并且提供了一个简单的发布流程，尤其适合开发者和技术人员使用。</p>
</blockquote>
<blockquote>
<p>GitHub Pages 的特点：</p>
</blockquote>
<blockquote>
<ul>
<li>免费托管：GitHub Pages 是免费的，只要你有一个 GitHub 账户，就可以使用这项服务。</li>
<li>支持自定义域名：你可以将自己的域名绑定到 GitHub Pages 托管的网站。</li>
<li>支持 HTTPS：GitHub Pages 会自动为你的网站提供 HTTPS 加密连接，确保网站的安全性。</li>
<li>与 GitHub 仓库集成：网站内容直接从 GitHub 仓库的文件生成和托管。你可以利用 GitHub 的版本控制功能来管理网站的更新和历史记录。</li>
<li>快速部署：通过简单的 Git 操作，你可以将博客或网站的内容直接从本地推送到 GitHub 上发布到网上。</li>
</ul>
</blockquote>
<h4 id="3-2、如何部署到-GitHub-Pages"><a href="#3-2、如何部署到-GitHub-Pages" class="headerlink" title="3.2、如何部署到 GitHub Pages"></a>3.2、如何部署到 GitHub Pages</h4><blockquote>
<p>创建一个 GitHub 仓库：首先，登录 GitHub，创建一个新的仓库。如果是个人网站，仓库名必须为 <code>your_username.github.io</code>（<code>your_username</code> 替换为你的 GitHub 用户名）。</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_d9bce224.png" alt="pic_d9bce224.png"></p>
<blockquote>
<p>然后在你的 hexo 中运行如下命令：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>修改配置文件<code>_config.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repo: git<span class="meta">@github</span>.com:USERNAME/USERNAME.github.io.git</span><br><span class="line">  branch: main</span><br></pre></td></tr></table></figure>

<blockquote>
<p>然后执行以下命令：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">#前面两个都介绍过，hexo d 是deployment的缩写，意为部署</span><br><span class="line">hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</span><br></pre></td></tr></table></figure>

<blockquote>
<p>等待部署完成，打开你的博客地址（USERNAME.github.io），就可以看到你的博客了。</p>
</blockquote>
<h3 id="四、Butterfly-主题美化"><a href="#四、Butterfly-主题美化" class="headerlink" title="四、Butterfly 主题美化"></a>四、Butterfly 主题美化</h3><blockquote>
<p>通过之前的步骤，我们已经完成了博客的基本搭建。但是，Hexo 默认的界面比较简单，接下来，让我们一起美化一下博客，提升它的视觉效果！</p>
</blockquote>
<blockquote>
<p>打开 Hexo 官网，可以看到这里有许多好看的主题，大家可以根据自己的喜好选择。</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_4545e07c.png" alt="pic_4545e07c.png"></p>
<blockquote>
<p>下面我以 Butterfly 主题来演示：</p>
</blockquote>
<h4 id="4-1、安装-Butterfly-主题"><a href="#4-1、安装-Butterfly-主题" class="headerlink" title="4.1、安装 Butterfly 主题"></a>4.1、安装 Butterfly 主题</h4><blockquote>
<p>在你的终端运行如下命令：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">git clone -b master https:<span class="comment">//github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly</span></span><br><span class="line">npm install hexo-renderer-pug hexo-renderer-stylus --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>修改配置文件 <code>_config.yml</code> 中的 <code>theme</code> 项为 butterfly：</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_c79b540c.png" alt="pic_c79b540c.png"></p>
<blockquote>
<p>建议:</p>
<ul>
<li>为了減少升级主题带来的不便，我们可以把主题文件夹中的 <code>_config.yml</code> 重命名为 <code>_config.butterfly.yml</code>，复制到 Hexo 根目录下与<code>_config.yml</code>同级。</li>
<li>Hexo 会自动合并主题中的<code>_config.yml</code>和 <code>_config.butterfly.yml</code> ，如果存在同名配置，会使用<code>_config.butterfly.yml</code>的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml 中，比如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 <code>_config.butterfly.yml</code> 中，那么在将来你想换一个主题是很方便的。</li>
</ul>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_5292e713.png" alt="pic_5292e713.png"></p>
<h4 id="4-2、安装插件"><a href="#4-2、安装插件" class="headerlink" title="4.2、安装插件"></a>4.2、安装插件</h4><h5 id="1、搜索插件"><a href="#1、搜索插件" class="headerlink" title="1、搜索插件"></a>1、搜索插件</h5><figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install hexo-generator-search --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>效果是给你的网站增加一个搜索栏：</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_18d2acad.png" alt="pic_18d2acad.png"></p>
<blockquote>
<p>更改配置文件 <code>_config.butterfly.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">use: local_search</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">    # Local search</span><br><span class="line">    local_search:</span><br><span class="line">    enable: <span class="literal">true</span></span><br><span class="line">    labels:</span><br><span class="line">        input_placeholder: Search <span class="keyword">for</span> Posts</span><br><span class="line">        hits_empty: <span class="string">&quot;We didn&#x27;t find any results for the search: $&#123;query&#125;&quot;</span></span><br></pre></td></tr></table></figure>

<h5 id="2-、图片懒加载插件"><a href="#2-、图片懒加载插件" class="headerlink" title="2.、图片懒加载插件"></a>2.、图片懒加载插件</h5><figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install hexo-lazyload-image --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>效果是当图片资源加载时用设置的动态加载图片覆盖图片异常显示：</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_33ac019c.png" alt="pic_33ac019c.png"></p>
<blockquote>
<p>在 <code>_config.yml</code> 中添加以下配置（注意是系统设置文件不是主题设置文件）：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">lazyload:</span><br><span class="line">  enable: <span class="literal">true</span></span><br><span class="line">  loadingImg: /img/loading.gif</span><br></pre></td></tr></table></figure>

<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_3755c14a.png" alt="pic_3755c14a.png"></p>
<h5 id="3、字数统计插件"><a href="#3、字数统计插件" class="headerlink" title="3、字数统计插件"></a>3、字数统计插件</h5><figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install hexo-wordcount --save or yarn add hexo-wordcount</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在 <code>_config.butterfly.yml</code> 中修改以下配置：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">wordcount:</span><br><span class="line">  enable: <span class="literal">true</span></span><br><span class="line">  post_wordcount: <span class="literal">true</span></span><br><span class="line">  min2read: <span class="literal">true</span></span><br><span class="line">  total_wordcount: <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<h4 id="4-3、个性化设置"><a href="#4-3、个性化设置" class="headerlink" title="4.3、个性化设置"></a>4.3、个性化设置</h4><h5 id="1、修改顶部菜单"><a href="#1、修改顶部菜单" class="headerlink" title="1、修改顶部菜单"></a>1、修改顶部菜单</h5><blockquote>
<p>修改主题配置文件<code>_config.butterfly.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">menu:</span><br><span class="line">  首页: / || fas fa-home</span><br><span class="line">  归档: /archives/ || fas fa-archive</span><br><span class="line">  标签: /tags/ || fas fa-tags</span><br><span class="line">  分类: /categories/ || fas fa-folder-open</span><br><span class="line">  列表||fa fa-list || hide:</span><br><span class="line">    音乐: /music/ || fas fa-music</span><br><span class="line">    照片: /picture/ || fas fa-images</span><br><span class="line">    电影: /movies/ || fas fa-video</span><br><span class="line">  留言板: /comments/ || fas fa-envelope-open</span><br><span class="line">  友链: /link/ || fas fa-link</span><br><span class="line">  关于: /about/ || fas fa-heart</span><br></pre></td></tr></table></figure>

<blockquote>
<p>必须是 <code>/xxx/</code>，后面<code>||</code>分开，然后写图标名，如果不想显示图标，图标名可不写</p>
</blockquote>
<blockquote>
<p>注意这里只是创建了导航菜单的·标签，我们还要新建对应的标签页：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">hexo <span class="keyword">new</span> <span class="title class_">page</span> tags</span><br><span class="line">......</span><br></pre></td></tr></table></figure>

<blockquote>
<p>然后加上对应的 type：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: tags</span><br><span class="line">date: <span class="number">2025</span>-<span class="number">02</span>-<span class="number">01</span> <span class="number">14</span>:<span class="number">40</span>:<span class="number">05</span></span><br><span class="line">type: <span class="string">&quot;tags&quot;</span></span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<blockquote>
<p>其他的标签也是一样，最终效果如图：</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_10471d95.png" alt="pic_10471d95.png"></p>
<h5 id="2-修改个人信息"><a href="#2-修改个人信息" class="headerlink" title="2. 修改个人信息"></a>2. 修改个人信息</h5><blockquote>
<p>修改配置文件 <code>_config.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">title: 标题</span><br><span class="line">subtitle: 副标题</span><br><span class="line">description: 个性签名</span><br><span class="line">keywords:</span><br><span class="line">author: 作者</span><br><span class="line">language: zh-CN</span><br><span class="line">timezone: Asia/Shanghai</span><br></pre></td></tr></table></figure>

<h5 id="3-修改侧边栏"><a href="#3-修改侧边栏" class="headerlink" title="3. 修改侧边栏"></a>3. 修改侧边栏</h5><blockquote>
<p>调整侧边栏位置：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">aside:</span><br><span class="line">  enable: <span class="literal">true</span></span><br><span class="line">  hide: <span class="literal">false</span></span><br><span class="line">  button: <span class="literal">true</span></span><br><span class="line">  mobile: <span class="literal">true</span> # display on mobile</span><br><span class="line">  position: right # left or right</span><br></pre></td></tr></table></figure>

<blockquote>
<p>增加个人链接：</p>
</blockquote>
<blockquote>
<p>打开配置文件 <code>_config.butterfly.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"># 侧边栏的个人链接</span><br><span class="line"># Social media links</span><br><span class="line"># Formal:</span><br><span class="line">#   icon: link || the description || color</span><br><span class="line">social:</span><br><span class="line">  fas fa-book: https:<span class="comment">//blog.csdn.net/m0_74123949 || CSDN || &#x27;#d81e06&#x27;</span></span><br><span class="line">  fas fa-code-branch: https:<span class="comment">//gitee.com/Ywj-ee || Gitee || &#x27;#C71D23&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>在<code>aside</code>里的<code>card_author</code>更改个人信息：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">card_author:</span><br><span class="line">    enable: <span class="literal">true</span></span><br><span class="line">    description:</span><br><span class="line">    button:</span><br><span class="line">      enable: <span class="literal">true</span></span><br><span class="line">      icon: fab fa-github</span><br><span class="line">      text: Follow Me</span><br><span class="line">      link: https:<span class="comment">//github.com/Ywj-ch</span></span><br><span class="line">  card_announcement:</span><br><span class="line">    enable: <span class="literal">true</span></span><br><span class="line">    content: 欢迎来到我的博客！</span><br></pre></td></tr></table></figure>

<blockquote>
<p>提一下 fa-github 是框架自带的图标库，<code>Butterfly</code>支持<a target="_blank" rel="noopener" href="https://fontawesome.com/icons?from=io">font-awesome v6</a>图标，当然你也可以根据自身需求进行定制。</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_13e307a2.png" alt="pic_13e307a2.png"></p>
<h5 id="4-图片设置"><a href="#4-图片设置" class="headerlink" title="4. 图片设置"></a>4. 图片设置</h5><blockquote>
<p>图片放在在<code>/themes/butterfly/source/img文件夹下面就行</code></p>
</blockquote>
<blockquote>
<p>打开配置文件 <code>_config.butterfly.yml</code></p>
</blockquote>
<p>网站图标</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">favicon: /img/favicon.png</span><br></pre></td></tr></table></figure>

<p>头像</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">avatar:</span><br><span class="line">  img: /img/butterfly-icon.png</span><br><span class="line">  effect: <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<p>背景</p>
<blockquote>
<p>背景建议是将封面图 index_img:不设置，直接设置 background: &#x2F;img&#x2F;背景图 2.jpg，然后将顶部图像设置为透明 default_top_img: rgba(0, 0, 0, 0)，这样的效果可以让你的背景图保持简洁（”一图流“）</p>
</blockquote>
<p>文章封面图</p>
<blockquote>
<p>打开<code>source/_posts/xxx.md</code>文章：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">---</span><br><span class="line">title: XXXXX        # 标题</span><br><span class="line">tags: XXXXX         # 标签</span><br><span class="line">categories: XXXXX   # 分类</span><br><span class="line">description: XXXXX  # 描述</span><br><span class="line">top_img: XXXXX      # 顶部背景图</span><br><span class="line">cover: XXXXX        # 文章封面</span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<h5 id="5、代码块样式"><a href="#5、代码块样式" class="headerlink" title="5、代码块样式"></a>5、代码块样式</h5><blockquote>
<p>打开配置文件 <code>_config.butterfly.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / <span class="literal">false</span> 代码主题</span><br><span class="line">highlight_copy: <span class="literal">true</span> # 复制按钮</span><br><span class="line">highlight_lang: <span class="literal">false</span> # 是否显示代码语言</span><br><span class="line">highlight_shrink: <span class="literal">false</span> # <span class="literal">true</span>: 代码块默认不展开 / <span class="literal">false</span>: 代码块默认展开 | none: 展开并隐藏折叠按钮</span><br><span class="line">highlight_height_limit: <span class="literal">false</span> # unit: px</span><br><span class="line">code_word_wrap: <span class="literal">true</span> #代码自动换行，关闭滚动条</span><br></pre></td></tr></table></figure>

<blockquote>
<p>同时将站点配置文件<code>_config.yml</code>的<code>highlight</code>设置为<code>false：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">highlight:</span><br><span class="line">  enable: <span class="literal">false</span></span><br><span class="line">  line_number: <span class="literal">false</span></span><br><span class="line">  auto_detect: <span class="literal">false</span></span><br></pre></td></tr></table></figure>

<h5 id="6、副标题循环打字效果"><a href="#6、副标题循环打字效果" class="headerlink" title="6、副标题循环打字效果"></a>6、副标题循环打字效果</h5><blockquote>
<p>打开配置文件 <code>_config.butterfly.yml：</code></p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"># The subtitle on homepage</span><br><span class="line">subtitle:</span><br><span class="line">  enable: <span class="literal">true</span></span><br><span class="line">  effect: <span class="literal">true</span></span><br><span class="line">  loop: <span class="literal">true</span></span><br><span class="line">  source: <span class="literal">false</span></span><br><span class="line">  # 如果有英文逗号<span class="string">&#x27; , &#x27;</span>,请使用转义字元 ,</span><br><span class="line">  # 如果有英文双引号<span class="string">&#x27; &quot; &#x27;</span>,请使用转义字元 <span class="string">&quot;</span></span><br><span class="line"><span class="string">  sub:</span></span><br><span class="line"><span class="string">    - Dare to dream Live to shine! 🌟💫</span></span><br><span class="line"><span class="string">    - Time flows gently Cherish each moment! ⏳🍃</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>效果如下：</p>
</blockquote>
<p><img src="/img/loading.gif" data-original="https://api.smain.cn/pics/pic_822e59b5.png" alt="pic_822e59b5.png"></p>
<h4 id="4-4、鼠标样式魔改"><a href="#4-4、鼠标样式魔改" class="headerlink" title="4.4、鼠标样式魔改"></a>4.4、鼠标样式魔改</h4><blockquote>
<p>新建文件<code>[BlogRoot]\source\js\cursor.js（默认是没有的）</code>，在里面写上如下代码：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> CURSOR;</span><br><span class="line"></span><br><span class="line">Math.lerp = (a, b, n) =&gt; (<span class="number">1</span> - n) * a + n * b;</span><br><span class="line"></span><br><span class="line"><span class="type">const</span> <span class="variable">getStyle</span> <span class="operator">=</span> (el, attr) =&gt; &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> window.getComputedStyle</span><br><span class="line">            ? window.getComputedStyle(el)[attr]</span><br><span class="line">            : el.currentStyle[attr];</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;&#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&quot;&quot;</span>;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Cursor</span> &#123;</span><br><span class="line">    constructor() &#123;</span><br><span class="line">        <span class="built_in">this</span>.pos = &#123;curr: <span class="literal">null</span>, prev: <span class="literal">null</span>&#125;;</span><br><span class="line">        <span class="built_in">this</span>.pt = [];</span><br><span class="line">        <span class="built_in">this</span>.create();</span><br><span class="line">        <span class="built_in">this</span>.init();</span><br><span class="line">        <span class="built_in">this</span>.render();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    move(left, top) &#123;</span><br><span class="line">        <span class="built_in">this</span>.cursor.style[<span class="string">&quot;left&quot;</span>] = `$&#123;left&#125;px`;</span><br><span class="line">        <span class="built_in">this</span>.cursor.style[<span class="string">&quot;top&quot;</span>] = `$&#123;top&#125;px`;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    create() &#123;</span><br><span class="line">        <span class="keyword">if</span> (!<span class="built_in">this</span>.cursor) &#123;</span><br><span class="line">            <span class="built_in">this</span>.cursor = document.createElement(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">            <span class="built_in">this</span>.cursor.id = <span class="string">&quot;cursor&quot;</span>;</span><br><span class="line">            <span class="built_in">this</span>.cursor.classList.add(<span class="string">&quot;hidden&quot;</span>);</span><br><span class="line">            document.body.append(<span class="built_in">this</span>.cursor);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="type">var</span> <span class="variable">el</span> <span class="operator">=</span> document.getElementsByTagName(<span class="string">&#x27;*&#x27;</span>);</span><br><span class="line">        <span class="keyword">for</span> (<span class="type">let</span> <span class="variable">i</span> <span class="operator">=</span> <span class="number">0</span>; i &lt; el.length; i++)</span><br><span class="line">            <span class="keyword">if</span> (getStyle(el[i], <span class="string">&quot;cursor&quot;</span>) == <span class="string">&quot;pointer&quot;</span>)</span><br><span class="line">                <span class="built_in">this</span>.pt.push(el[i].outerHTML);</span><br><span class="line"></span><br><span class="line">        document.body.appendChild((<span class="built_in">this</span>.scr = document.createElement(<span class="string">&quot;style&quot;</span>)));</span><br><span class="line">        <span class="comment">// 这里改变鼠标指针的颜色 由svg生成</span></span><br><span class="line">        <span class="built_in">this</span>.scr.innerHTML = `* &#123;cursor: url(<span class="string">&quot;data:image/svg+xml,&lt;svg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; viewBox=&#x27;0 0 8 8&#x27; width=&#x27;8px&#x27; height=&#x27;8px&#x27;&gt;&lt;circle cx=&#x27;4&#x27; cy=&#x27;4&#x27; r=&#x27;4&#x27; opacity=&#x27;.5&#x27;/&gt;&lt;/svg&gt;&quot;</span>) <span class="number">4</span> <span class="number">4</span>, auto&#125;`;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    refresh() &#123;</span><br><span class="line">        <span class="built_in">this</span>.scr.remove();</span><br><span class="line">        <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;hover&quot;</span>);</span><br><span class="line">        <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">        <span class="built_in">this</span>.pos = &#123;curr: <span class="literal">null</span>, prev: <span class="literal">null</span>&#125;;</span><br><span class="line">        <span class="built_in">this</span>.pt = [];</span><br><span class="line"></span><br><span class="line">        <span class="built_in">this</span>.create();</span><br><span class="line">        <span class="built_in">this</span>.init();</span><br><span class="line">        <span class="built_in">this</span>.render();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    init() &#123;</span><br><span class="line">        document.onmouseover  = e =&gt; <span class="built_in">this</span>.pt.includes(e.target.outerHTML) &amp;&amp; <span class="built_in">this</span>.cursor.classList.add(<span class="string">&quot;hover&quot;</span>);</span><br><span class="line">        document.onmouseout   = e =&gt; <span class="built_in">this</span>.pt.includes(e.target.outerHTML) &amp;&amp; <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;hover&quot;</span>);</span><br><span class="line">        document.onmousemove  = e =&gt; &#123;(<span class="built_in">this</span>.pos.curr == <span class="literal">null</span>) &amp;&amp; <span class="built_in">this</span>.move(e.clientX - <span class="number">8</span>, e.clientY - <span class="number">8</span>); <span class="built_in">this</span>.pos.curr = &#123;x: e.clientX - <span class="number">8</span>, y: e.clientY - <span class="number">8</span>&#125;; <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;hidden&quot;</span>);&#125;;</span><br><span class="line">        document.onmouseenter = e =&gt; <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;hidden&quot;</span>);</span><br><span class="line">        document.onmouseleave = e =&gt; <span class="built_in">this</span>.cursor.classList.add(<span class="string">&quot;hidden&quot;</span>);</span><br><span class="line">        document.onmousedown  = e =&gt; <span class="built_in">this</span>.cursor.classList.add(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">        document.onmouseup    = e =&gt; <span class="built_in">this</span>.cursor.classList.remove(<span class="string">&quot;active&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    render() &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">this</span>.pos.prev) &#123;</span><br><span class="line">            <span class="built_in">this</span>.pos.prev.x = Math.lerp(<span class="built_in">this</span>.pos.prev.x, <span class="built_in">this</span>.pos.curr.x, <span class="number">0.15</span>);</span><br><span class="line">            <span class="built_in">this</span>.pos.prev.y = Math.lerp(<span class="built_in">this</span>.pos.prev.y, <span class="built_in">this</span>.pos.curr.y, <span class="number">0.15</span>);</span><br><span class="line">            <span class="built_in">this</span>.move(<span class="built_in">this</span>.pos.prev.x, <span class="built_in">this</span>.pos.prev.y);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="built_in">this</span>.pos.prev = <span class="built_in">this</span>.pos.curr;</span><br><span class="line">        &#125;</span><br><span class="line">        requestAnimationFrame(() =&gt; <span class="built_in">this</span>.render());</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(() =&gt; &#123;</span><br><span class="line">    CURSOR = <span class="keyword">new</span> <span class="title class_">Cursor</span>();</span><br><span class="line">    <span class="comment">// 需要重新获取列表时，使用 CURSOR.refresh()</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<blockquote>
<p>其中比较重要的参数就是鼠标的尺寸和颜色，已经在上面的代码中标出，可以自行调节。</p>
</blockquote>
<blockquote>
<p>在<code>[BlogRoot]\source\css\custom.css</code>添加如下代码：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* 鼠标样式 */</span></span><br><span class="line">#cursor &#123;</span><br><span class="line">  position: fixed;</span><br><span class="line">  width: 16px;</span><br><span class="line">  height: 16px;</span><br><span class="line">  <span class="comment">/* 这里改变跟随的底色 */</span></span><br><span class="line">  background: <span class="keyword">var</span>(--theme-color);</span><br><span class="line">  border-radius: 8px;</span><br><span class="line">  opacity: <span class="number">0.25</span>;</span><br><span class="line">  z-index: <span class="number">10086</span>;</span><br><span class="line">  pointer-events: none;</span><br><span class="line">  transition: <span class="number">0.</span>2s ease-in-out;</span><br><span class="line">  transition-property: background, opacity, transform;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">#cursor.hidden &#123;</span><br><span class="line">  opacity: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">#cursor.hover &#123;</span><br><span class="line">  opacity: <span class="number">0.1</span>;</span><br><span class="line">  transform: scale(<span class="number">2.5</span>);</span><br><span class="line">  -webkit-transform: scale(<span class="number">2.5</span>);</span><br><span class="line">  -moz-transform: scale(<span class="number">2.5</span>);</span><br><span class="line">  -ms-transform: scale(<span class="number">2.5</span>);</span><br><span class="line">  -o-transform: scale(<span class="number">2.5</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">#cursor.active &#123;</span><br><span class="line">  opacity: <span class="number">0.5</span>;</span><br><span class="line">  transform: scale(<span class="number">0.5</span>);</span><br><span class="line">  -webkit-transform: scale(<span class="number">0.5</span>);</span><br><span class="line">  -moz-transform: scale(<span class="number">0.5</span>);</span><br><span class="line">  -ms-transform: scale(<span class="number">0.5</span>);</span><br><span class="line">  -o-transform: scale(<span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>这里比较重要的参数就是鼠标跟随的圆形颜色，可以根据自己的喜好进行更改：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">#cursor &#123;</span><br><span class="line">  <span class="comment">/* 这里改变跟随的底色 */</span></span><br><span class="line">  background: rgb(<span class="number">57</span>, <span class="number">197</span>, <span class="number">187</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>最后在主题配置文件 <code>_config.butterfly.yml</code>文件的<code>inject</code>配置项引入刚刚创建的 <code>css</code>文件和 <code>js</code>文件：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">inject:</span><br><span class="line">  head:</span><br><span class="line">    - &lt;link rel=<span class="string">&quot;stylesheet&quot;</span> href=<span class="string">&quot;/css/custom.css&quot;</span>&gt;</span><br><span class="line">  bottom:</span><br><span class="line">    - &lt;script defer src=<span class="string">&quot;/js/cursor.js&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>重启项目就能看到效果了</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">hexo cl; hexo s</span><br></pre></td></tr></table></figure>

<h4 id="4-5、Live2D-看板娘"><a href="#4-5、Live2D-看板娘" class="headerlink" title="4.5、Live2D 看板娘"></a>4.5、Live2D 看板娘</h4><blockquote>
<p>详见：<a target="_blank" rel="noopener" href="https://akilar.top/posts/5b8f515f/">Live2d Widget | Akilar の糖果屋</a></p>
</blockquote>
<blockquote>
<p>在 Hexo 根目录<code>[BlogRoot]</code>下打开终端，输入以下指令安装必要插件：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install --save hexo-helper-live2d</span><br></pre></td></tr></table></figure>

<blockquote>
<p>打开站点配置文件<code>[BlogRoot]\config.yml</code><br>搜索 live2d,按照如下注释内容指示进行操作。<br>如果没有搜到 live2d 的配置项，就直接把以下内容复制到最底部。</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"># Live2D</span><br><span class="line">## https:<span class="comment">//github.com/EYHN/hexo-helper-live2d</span></span><br><span class="line">live2d:</span><br><span class="line">  enable: <span class="literal">true</span> #开关插件版看板娘</span><br><span class="line">  scriptFrom: local # 默认</span><br><span class="line">  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)</span><br><span class="line">  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径</span><br><span class="line">  pluginModelPath: assets/ # 模型文件相对与插件根目录路径</span><br><span class="line">  # scriptFrom: jsdelivr # jsdelivr CDN</span><br><span class="line">  # scriptFrom: unpkg # unpkg CDN</span><br><span class="line">  # scriptFrom: https:<span class="comment">//npm.elemecdn.com/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url</span></span><br><span class="line">  tagMode: <span class="literal">false</span> # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中</span><br><span class="line">  debug: <span class="literal">false</span> # 调试, 是否在控制台输出日志</span><br><span class="line">  model:</span><br><span class="line">    use: live2d-widget-model-wanko # npm-<span class="keyword">module</span> <span class="keyword">package</span> name</span><br><span class="line">    # use: wanko # 博客根目录/live2d_models/ 下的目录名</span><br><span class="line">    # use: ./wives/wanko # 相对于博客根目录的路径</span><br><span class="line">    # use: https:<span class="comment">//npm.elemecdn.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url</span></span><br><span class="line">  display:</span><br><span class="line">    position: right #控制看板娘位置</span><br><span class="line">    width: <span class="number">150</span> #控制看板娘大小</span><br><span class="line">    height: <span class="number">300</span> #控制看板娘大小</span><br><span class="line">  mobile:</span><br><span class="line">    show: <span class="literal">false</span> # 手机中是否展示</span><br></pre></td></tr></table></figure>

<blockquote>
<p>然后重启项目即可浏览效果了</p>
</blockquote>
<h4 id="4-6、文章置顶滚动栏"><a href="#4-6、文章置顶滚动栏" class="headerlink" title="4.6、文章置顶滚动栏"></a>4.6、文章置顶滚动栏</h4><blockquote>
<p>安装插件,在博客根目录<code>[BlogRoot]</code>下打开终端，运行以下指令：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line">npm install hexo-butterfly-swiper --save</span><br></pre></td></tr></table></figure>

<blockquote>
<p>在站点配置文件<code>_config.yml</code>或者主题配置文件<code>_config.butterfly.yml</code>中添加：</p>
</blockquote>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"># hexo-butterfly-swiper</span><br><span class="line"># see https:<span class="comment">//akilar.top/posts/8e1264d1/</span></span><br><span class="line">swiper:</span><br><span class="line">  enable: <span class="literal">true</span> # 开关</span><br><span class="line">  priority: <span class="number">5</span> #过滤器优先权</span><br><span class="line">  enable_page: all # 应用页面</span><br><span class="line">  timemode: date #date/updated</span><br><span class="line">  layout: # 挂载容器类型</span><br><span class="line">    type: id</span><br><span class="line">    name: recent-posts</span><br><span class="line">    index: <span class="number">0</span></span><br><span class="line">  default_descr: 再怎么看我也不知道怎么描述它的啦！</span><br><span class="line">  swiper_css: https:<span class="comment">//npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css #swiper css依赖</span></span><br><span class="line">  swiper_js: https:<span class="comment">//npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js #swiper js依赖</span></span><br><span class="line">  custom_css: https:<span class="comment">//npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css # 适配主题样式补丁</span></span><br><span class="line">  custom_js: https:<span class="comment">//npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js # swiper初始化方法</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>到这里，相信你已经成功搭建了一个外观简洁且漂亮的博客。在这个过程中，我们不仅完成了博客的基础搭建，还通过美化主题让博客的视觉效果更加吸引人。不过，真正让博客与众不同的，不仅仅是它的外观，而是博客的内容。你可以根据自己的兴趣和需求，持续添加有价值的内容，分享你的技术经验、生活感悟或创作成果。</p>
</blockquote>
<blockquote>
<p>无论是记录学习过程中的点滴，还是分享工作中的见解，内容才是吸引读者和展示个人特色的关键。希望你能通过这个平台，不断积累和沉淀，让你的博客成为一个有深度、有温度的地方。</p>
</blockquote>
<blockquote>
<p>最后，博客的搭建只是开始，真正的挑战是如何持续更新内容，并与读者建立连接。祝你在博客的创作之路上越走越远！”</p>
</blockquote>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://ywj-ch.github.io">爱吃薯片的熊猫</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://ywj-ch.github.io/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/">https://ywj-ch.github.io/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来源 <a href="https://ywj-ch.github.io" target="_blank">爱吃薯片的熊猫の技术小站</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a></div><div class="post-share"><div class="social-share" data-image="/img/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/social-share.js/1.0.16/css/share.min.css" media="print" onload="this.media='all'"><script src="https://lib.baomitu.com/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related full-width" href="/2025/02/11/Spring%20Boot%20+%20Vue%20%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%BA%BF%E5%AE%9E%E8%AE%B0/" title="Spring Boot + Vue 前后端分离项目上线实记"><img class="cover" src="/img/loading.gif" data-original="/img/%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%BA%BF.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">Spring Boot + Vue 前后端分离项目上线实记</div></div><div class="info-2"><div class="info-item-1">一、前言 本文记录了一个前后端分离项目的完整部署流程。许多同学在本地开发完项目后，缺乏将其部署到远程服务器的实战经验。因此，我将以一个实际项目为例，详细展示从环境准备到最终上线的全过程，希望对你有所帮助！  二、服务器环境准备2.1、配置服务器 首先准备一个服务器，我这里用的是阿里云 ：     第一次购买一般都会有优惠，而且对于一般的单体项目而言 2 核 2G 的配置也够用了，当然也有 3 个月的试用版本。   完成之后进入控制台第一件事就是去你左侧边栏的安全组里面开放端口，这样才能从远程访问。     端口范围根据需求开放，一般是 3306 mysql、80 nginx 代理、13103 这里是宝塔面板的端口，什么是宝塔面板后面会讲到，下面 3 个端口是默认初始化好的。   然后进入实例面板重新设置一下你的服务器密码：    修改完成之后就可以试着连接你的服务器了，我这里使用的是...</div></div></div></a></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/loading.gif" data-original="/img/butterfly-icon.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">爱吃薯片的熊猫</div><div class="author-info-description">Dream big Work hard Stay focused</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">6</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">3</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/Ywj-ch"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons"><a class="social-icon" href="https://blog.csdn.net/m0_74123949" target="_blank" title="CSDN"><i class="fas fa-book" style="color: #d81e06;"></i></a><a class="social-icon" href="https://gitee.com/Ywj-ee" target="_blank" title="Gitee"><i class="fas fa-code-branch" style="color: #C71D23;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">欢迎来到我的博客！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">一、前言</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81Hexo-%E6%A1%86%E6%9E%B6%E7%AE%80%E4%BB%8B"><span class="toc-number">2.</span> <span class="toc-text">二、Hexo 框架简介</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#2-1%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AF-Hexo%EF%BC%9F"><span class="toc-number">2.1.</span> <span class="toc-text">2.1、什么是 Hexo？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-2%E3%80%81%E5%AE%89%E8%A3%85"><span class="toc-number">2.2.</span> <span class="toc-text">2.2、安装</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-3%E3%80%81%E7%BB%93%E6%9E%84%E8%A7%A3%E6%9E%90"><span class="toc-number">2.3.</span> <span class="toc-text">2.3、结构解析</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-4%E3%80%81%E5%A6%82%E4%BD%95%E5%86%99%E6%96%87%E7%AB%A0%EF%BC%9F"><span class="toc-number">2.4.</span> <span class="toc-text">2.4、如何写文章？</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E5%9F%BA%E4%BA%8E-GitHub-Pages-%E9%83%A8%E7%BD%B2"><span class="toc-number">3.</span> <span class="toc-text">三、基于 GitHub Pages 部署</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#3-1%E3%80%81%E4%BB%80%E4%B9%88%E6%98%AF-GitHub-Pages%EF%BC%9F"><span class="toc-number">3.1.</span> <span class="toc-text">3.1、什么是 GitHub Pages？</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-2%E3%80%81%E5%A6%82%E4%BD%95%E9%83%A8%E7%BD%B2%E5%88%B0-GitHub-Pages"><span class="toc-number">3.2.</span> <span class="toc-text">3.2、如何部署到 GitHub Pages</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81Butterfly-%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96"><span class="toc-number">4.</span> <span class="toc-text">四、Butterfly 主题美化</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-1%E3%80%81%E5%AE%89%E8%A3%85-Butterfly-%E4%B8%BB%E9%A2%98"><span class="toc-number">4.1.</span> <span class="toc-text">4.1、安装 Butterfly 主题</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-2%E3%80%81%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="toc-number">4.2.</span> <span class="toc-text">4.2、安装插件</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1%E3%80%81%E6%90%9C%E7%B4%A2%E6%8F%92%E4%BB%B6"><span class="toc-number">4.2.1.</span> <span class="toc-text">1、搜索插件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E3%80%81%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%E6%8F%92%E4%BB%B6"><span class="toc-number">4.2.2.</span> <span class="toc-text">2.、图片懒加载插件</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3%E3%80%81%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E6%8F%92%E4%BB%B6"><span class="toc-number">4.2.3.</span> <span class="toc-text">3、字数统计插件</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-3%E3%80%81%E4%B8%AA%E6%80%A7%E5%8C%96%E8%AE%BE%E7%BD%AE"><span class="toc-number">4.3.</span> <span class="toc-text">4.3、个性化设置</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1%E3%80%81%E4%BF%AE%E6%94%B9%E9%A1%B6%E9%83%A8%E8%8F%9C%E5%8D%95"><span class="toc-number">4.3.1.</span> <span class="toc-text">1、修改顶部菜单</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E4%BF%AE%E6%94%B9%E4%B8%AA%E4%BA%BA%E4%BF%A1%E6%81%AF"><span class="toc-number">4.3.2.</span> <span class="toc-text">2. 修改个人信息</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E4%BF%AE%E6%94%B9%E4%BE%A7%E8%BE%B9%E6%A0%8F"><span class="toc-number">4.3.3.</span> <span class="toc-text">3. 修改侧边栏</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-%E5%9B%BE%E7%89%87%E8%AE%BE%E7%BD%AE"><span class="toc-number">4.3.4.</span> <span class="toc-text">4. 图片设置</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#5%E3%80%81%E4%BB%A3%E7%A0%81%E5%9D%97%E6%A0%B7%E5%BC%8F"><span class="toc-number">4.3.5.</span> <span class="toc-text">5、代码块样式</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#6%E3%80%81%E5%89%AF%E6%A0%87%E9%A2%98%E5%BE%AA%E7%8E%AF%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C"><span class="toc-number">4.3.6.</span> <span class="toc-text">6、副标题循环打字效果</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-4%E3%80%81%E9%BC%A0%E6%A0%87%E6%A0%B7%E5%BC%8F%E9%AD%94%E6%94%B9"><span class="toc-number">4.4.</span> <span class="toc-text">4.4、鼠标样式魔改</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-5%E3%80%81Live2D-%E7%9C%8B%E6%9D%BF%E5%A8%98"><span class="toc-number">4.5.</span> <span class="toc-text">4.5、Live2D 看板娘</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-6%E3%80%81%E6%96%87%E7%AB%A0%E7%BD%AE%E9%A1%B6%E6%BB%9A%E5%8A%A8%E6%A0%8F"><span class="toc-number">4.6.</span> <span class="toc-text">4.6、文章置顶滚动栏</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/" title="基于Hexo框架和Butterfly主题搭建个人博客网站"><img src="/img/loading.gif" data-original="/img/%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="基于Hexo框架和Butterfly主题搭建个人博客网站"/></a><div class="content"><a class="title" href="/2025/02/11/%E5%9F%BA%E4%BA%8EHexo%E6%A1%86%E6%9E%B6%E5%92%8CButterfly%E4%B8%BB%E9%A2%98%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E7%BD%91%E7%AB%99/" title="基于Hexo框架和Butterfly主题搭建个人博客网站">基于Hexo框架和Butterfly主题搭建个人博客网站</a><time datetime="2025-02-11T13:37:26.000Z" title="发表于 2025-02-11 21:37:26">2025-02-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/02/11/Spring%20Boot%20+%20Vue%20%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%BA%BF%E5%AE%9E%E8%AE%B0/" title="Spring Boot + Vue 前后端分离项目上线实记"><img src="/img/loading.gif" data-original="/img/%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%BA%BF.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Spring Boot + Vue 前后端分离项目上线实记"/></a><div class="content"><a class="title" href="/2025/02/11/Spring%20Boot%20+%20Vue%20%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E9%A1%B9%E7%9B%AE%E4%B8%8A%E7%BA%BF%E5%AE%9E%E8%AE%B0/" title="Spring Boot + Vue 前后端分离项目上线实记">Spring Boot + Vue 前后端分离项目上线实记</a><time datetime="2025-02-11T13:29:31.000Z" title="发表于 2025-02-11 21:29:31">2025-02-11</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/01/25/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%85%A5%E9%97%A8%EF%BC%9A%E6%9C%8D%E5%8A%A1%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B%E8%A7%A3%E6%9E%90/" title="SpringCloud 微服务入门：服务调用流程解析"><img src="/img/loading.gif" data-original="/img/SpringCloud%20%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%85%A5%E9%97%A8%EF%BC%9A%E6%9C%8D%E5%8A%A1%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B%E8%A7%A3%E6%9E%90.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SpringCloud 微服务入门：服务调用流程解析"/></a><div class="content"><a class="title" href="/2025/01/25/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E5%85%A5%E9%97%A8%EF%BC%9A%E6%9C%8D%E5%8A%A1%E8%B0%83%E7%94%A8%E6%B5%81%E7%A8%8B%E8%A7%A3%E6%9E%90/" title="SpringCloud 微服务入门：服务调用流程解析">SpringCloud 微服务入门：服务调用流程解析</a><time datetime="2025-01-25T12:08:31.000Z" title="发表于 2025-01-25 20:08:31">2025-01-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/01/12/Linux%EF%BC%88Centos7%EF%BC%89%E5%AE%89%E8%A3%85docker%E3%80%81mysql%E8%B8%A9%E5%9D%91%E6%80%BB%E7%BB%93/" title="Linux（Centos7）安装docker、mysql踩坑总结"><img src="/img/loading.gif" data-original="/img/Linux%EF%BC%88Centos7%EF%BC%89%E5%AE%89%E8%A3%85docker%E3%80%81mysql%E8%B8%A9%E5%9D%91%E6%80%BB%E7%BB%93.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Linux（Centos7）安装docker、mysql踩坑总结"/></a><div class="content"><a class="title" href="/2025/01/12/Linux%EF%BC%88Centos7%EF%BC%89%E5%AE%89%E8%A3%85docker%E3%80%81mysql%E8%B8%A9%E5%9D%91%E6%80%BB%E7%BB%93/" title="Linux（Centos7）安装docker、mysql踩坑总结">Linux（Centos7）安装docker、mysql踩坑总结</a><time datetime="2025-01-12T13:05:12.000Z" title="发表于 2025-01-12 21:05:12">2025-01-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2025/01/04/%E7%94%A8Python%E4%B8%8EFiddler%E5%AE%9E%E7%8E%B0%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%BA%A7%E4%BD%8D%E8%87%AA%E5%8A%A8%E9%A2%84%E7%BA%A6%EF%BC%9A%E5%AE%9E%E6%88%98%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/" title="用Python与Fiddler实现图书馆座位自动预约：实战经验分享"><img src="/img/loading.gif" data-original="/img/%E7%94%A8Python%E4%B8%8EFiddler%E5%AE%9E%E7%8E%B0%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%BA%A7%E4%BD%8D%E8%87%AA%E5%8A%A8%E9%A2%84%E7%BA%A6%EF%BC%9A%E5%AE%9E%E6%88%98%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="用Python与Fiddler实现图书馆座位自动预约：实战经验分享"/></a><div class="content"><a class="title" href="/2025/01/04/%E7%94%A8Python%E4%B8%8EFiddler%E5%AE%9E%E7%8E%B0%E5%9B%BE%E4%B9%A6%E9%A6%86%E5%BA%A7%E4%BD%8D%E8%87%AA%E5%8A%A8%E9%A2%84%E7%BA%A6%EF%BC%9A%E5%AE%9E%E6%88%98%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/" title="用Python与Fiddler实现图书馆座位自动预约：实战经验分享">用Python与Fiddler实现图书馆座位自动预约：实战经验分享</a><time datetime="2025-01-04T05:21:05.000Z" title="发表于 2025-01-04 13:21:05">2025-01-04</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2024 - 2025 By 爱吃薯片的熊猫</div><div class="footer_custom_text"><span style='color:#FFD700; font-weight:bold;'>竹子用了4年的时间， 仅仅长了3cm， 从第五年开始， 以每天30cm的速度疯狂地生长， 仅仅用了六周的时间就长到了15米。</span><br>
<span style='color:#87CEEB; font-weight:bold;'>其实，在前面的四年， 竹子将根在土壤里延伸了数百平米。 做人做事亦是如此， 不要担心你此时此刻的付出得不到回报， 因为这些付出都是为了扎根。</span>
</div></div><!-- 添加网站运行时间显示的容器--><div id="runtimeshow" data-publishDate="2025-02-01"><span>小站已运行了：</span><span id="runtime-counter"></span><span class="sand-clock">⏳</span></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><div class="js-pjax"></div><canvas id="universe"></canvas><script defer src="/js/universe.js"></script><script defer src="/js/cursor.js"></script><script src="/js/sun_moon.js" async></script><script async src="/js/fps.js"></script><script async src="/js/title.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="Search for Posts" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><!-- hexo injector body_end start --> <script data-pjax>if(document.getElementById('recent-posts') && (location.pathname ==='/'|| '/' ==='all')){
    var parent = document.getElementById('recent-posts');
    var child = '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet"><div class="magnet_item"><a class="magnet_link" href="https://ywj-ch.github.io/categories/学习笔记/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">📚 爱吃薯片的熊猫の学习笔记 (4)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><div class="magnet_item"><a class="magnet_link" href="https://ywj-ch.github.io/categories/个人项目/"><div class="magnet_link_context" style=""><span style="font-weight:500;flex:1">👩‍💻 爱吃薯片的熊猫の个人项目 (1)</span><span style="padding:0px 4px;border-radius: 8px;"><i class="fas fa-arrow-circle-right"></i></span></div></a></div><a class="magnet_link_more"  href="https://ywj-ch.github.io/categories" style="flex:1;text-align: center;margin-bottom: 10px;">查看更多...</a></div></div>';
    console.log('已挂载magnet')
    parent.insertAdjacentHTML("afterbegin",child)}
     </script><style>#catalog_magnet{flex-wrap: wrap;display: flex;width:100%;justify-content:space-between;padding: 10px 10px 0 10px;align-content: flex-start;}.magnet_item{flex-basis: calc(50% - 5px);background: #f2f2f2;margin-bottom: 10px;border-radius: 8px;transition: all 0.2s ease-in-out;}.magnet_item:hover{background: #69e8f2}.magnet_link_more{color:#555}.magnet_link{color:black}.magnet_link:hover{color:white}@media screen and (max-width: 600px) {.magnet_item {flex-basis: 100%;}}.magnet_link_context{display:flex;padding: 10px;font-size:16px;transition: all 0.2s ease-in-out;}.magnet_link_context:hover{padding: 10px 20px;}</style>
    <style></style><script data-pjax>
  function butterfly_swiper_injector_config(){
    var parent_div_git = document.getElementById('recent-posts');
    var item_html = '<div class="recent-post-item" style="height: auto;width: 100%"><div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><div class="blog-slider__wrp swiper-wrapper" style="transition-duration: 0ms;"><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2025/01/25/微服务入门：服务调用流程解析/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/SpringCloud 微服务入门：服务调用流程解析.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-01-25</span><a class="blog-slider__title" href="2025/01/25/微服务入门：服务调用流程解析/" alt="">SpringCloud 微服务入门：服务调用流程解析</a><div class="blog-slider__text">记录了在 CentOS 7 上安装 Docker 和 MySQL 时遇到的问题及解决方案，帮助你更顺利地搭建环境，避免常见的坑。</div><a class="blog-slider__button" href="2025/01/25/微服务入门：服务调用流程解析/" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2025/02/11/基于Hexo框架和Butterfly主题搭建个人博客网站/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/个人博客搭建教程.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-11</span><a class="blog-slider__title" href="2025/02/11/基于Hexo框架和Butterfly主题搭建个人博客网站/" alt="">基于Hexo框架和Butterfly主题搭建个人博客网站</a><div class="blog-slider__text">在这篇博客中，我将带你一起走过基于 Hexo 框架搭建个人博客的全过程，同时介绍如何使用 Butterfly 主题来美化博客，使其更加符合个人风格。</div><a class="blog-slider__button" href="2025/02/11/基于Hexo框架和Butterfly主题搭建个人博客网站/" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2025/02/11/Spring Boot + Vue 前后端分离项目上线实记/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/项目上线.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-02-11</span><a class="blog-slider__title" href="2025/02/11/Spring Boot + Vue 前后端分离项目上线实记/" alt="">Spring Boot + Vue 前后端分离项目上线实记</a><div class="blog-slider__text">记录了一个前后端分离项目的完整部署流程。</div><a class="blog-slider__button" href="2025/02/11/Spring Boot + Vue 前后端分离项目上线实记/" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2025/01/12/Linux（Centos7）安装docker、mysql踩坑总结/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/Linux（Centos7）安装docker、mysql踩坑总结.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-01-12</span><a class="blog-slider__title" href="2025/01/12/Linux（Centos7）安装docker、mysql踩坑总结/" alt="">Linux（Centos7）安装docker、mysql踩坑总结</a><div class="blog-slider__text">记录了在 CentOS 7 上安装 Docker 和 MySQL 时遇到的问题及解决方案，帮助你更顺利地搭建环境，避免常见的坑。</div><a class="blog-slider__button" href="2025/01/12/Linux（Centos7）安装docker、mysql踩坑总结/" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2025/01/04/用Python与Fiddler实现图书馆座位自动预约：实战经验分享/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/用Python与Fiddler实现图书馆座位自动预约：实战经验分享.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2025-01-04</span><a class="blog-slider__title" href="2025/01/04/用Python与Fiddler实现图书馆座位自动预约：实战经验分享/" alt="">用Python与Fiddler实现图书馆座位自动预约：实战经验分享</a><div class="blog-slider__text">本文详细介绍了基于若依框架构建 SpringBoot 管理系统的学习过程，涵盖了框架的基本配置、功能实现及常见问题解决，帮助开发者快速上手和掌握若依框架。</div><a class="blog-slider__button" href="2025/01/04/用Python与Fiddler实现图书馆座位自动预约：实战经验分享/" alt="">详情   </a></div></div><div class="blog-slider__item swiper-slide" style="width: 750px; opacity: 1; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"><a class="blog-slider__img" href="2024/10/24/基于若依框架的SpringBoot管理系统学习/" alt=""><img width="48" height="48" src="/img/loading.gif" data-original="/img/基于若依框架的SpringBoot管理系统学习.png" alt="" onerror="this.src=https://unpkg.zhimg.com/akilar-candyassets/image/loading.gif; this.onerror = null;"/></a><div class="blog-slider__content"><span class="blog-slider__code">2024-10-24</span><a class="blog-slider__title" href="2024/10/24/基于若依框架的SpringBoot管理系统学习/" alt="">基于若依框架的SpringBoot管理系统学习</a><div class="blog-slider__text">本文详细介绍了基于若依框架构建 SpringBoot 管理系统的学习过程，涵盖了框架的基本配置、功能实现及常见问题解决，帮助开发者快速上手和掌握若依框架。</div><a class="blog-slider__button" href="2024/10/24/基于若依框架的SpringBoot管理系统学习/" alt="">详情   </a></div></div></div><div class="blog-slider__pagination swiper-pagination-clickable swiper-pagination-bullets"></div></div></div>';
    console.log('已挂载butterfly_swiper')
    parent_div_git.insertAdjacentHTML("afterbegin",item_html)
    }
  var elist = 'undefined'.split(',');
  var cpage = location.pathname;
  var epage = '/';
  var flag = 0;

  for (var i=0;i<elist.length;i++){
    if (cpage.includes(elist[i])){
      flag++;
    }
  }

  if ((epage ==='all')&&(flag == 0)){
    butterfly_swiper_injector_config();
  }
  else if (epage === cpage){
    butterfly_swiper_injector_config();
  }
  </script><script defer src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js"></script><script defer data-pjax src="https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js"></script><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__fadeInDown');
    arr[i].setAttribute('data-wow-duration', '2s');
    arr[i].setAttribute('data-wow-delay', '1s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '2');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end -->
        <style>
            [bg-lazy] {
                background-image: none !important;
                background-color: #eee !important;
            }
        </style>
        <script>
            window.imageLazyLoadSetting = {
                isSPA: false,
                preloadRatio: 1,
                processImages: null,
            };
        </script><script>window.addEventListener("load",function(){var t=/\.(gif|jpg|jpeg|tiff|png)$/i,r=/^data:image\/[a-z\d\-\.\+]+;base64,/;Array.prototype.slice.call(document.querySelectorAll("img[data-original]")).forEach(function(a){var e=a.parentNode;"A"===e.tagName&&(t.test(e.href)||r.test(e.href))&&(e.href=a.dataset.original)})});</script><script>(r=>{r.imageLazyLoadSetting.processImages=t;var a=r.imageLazyLoadSetting.isSPA,o=r.imageLazyLoadSetting.preloadRatio||1,d=i();function i(){var t=Array.prototype.slice.call(document.querySelectorAll("img[data-original]")),e=Array.prototype.slice.call(document.querySelectorAll("[bg-lazy]"));return t.concat(e)}function t(t){(a||t)&&(d=i());for(var e,n=0;n<d.length;n++)0<=(e=(e=d[n]).getBoundingClientRect()).bottom&&0<=e.left&&e.top<=(r.innerHeight*o||document.documentElement.clientHeight*o)&&(()=>{var t,e,a,o,i=d[n];e=function(){d=d.filter(function(t){return i!==t}),r.imageLazyLoadSetting.onImageLoaded&&r.imageLazyLoadSetting.onImageLoaded(i)},(t=i).dataset.loaded||(t.hasAttribute("bg-lazy")?(t.removeAttribute("bg-lazy"),e&&e()):(a=new Image,o=t.getAttribute("data-original"),a.onload=function(){t.src=o,t.removeAttribute("data-original"),t.setAttribute("data-loaded",!0),e&&e()},a.onerror=function(){t.removeAttribute("data-original"),t.setAttribute("data-loaded",!1),t.src=o},t.src!==o&&(a.src=o)))})()}function e(){clearTimeout(t.tId),t.tId=setTimeout(t,500)}t(),document.addEventListener("scroll",e),r.addEventListener("resize",e),r.addEventListener("orientationchange",e)})(this);</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/koharu.model.json"},"display":{"position":"left","width":150,"height":300},"mobile":{"show":false},"log":false});</script></body></html>